<template>
    <div class="qx-container p-all-10">
        <tabs :target-list="targetList"></tabs>  

		<user-management 
			v-if="tabCurrentIndex == 1 && !stepFlag && !stepFirst" 
			:admin-list="adminList" 
			:rule-map="ruleMap" 
			@editUser = "editUser"
			@handleTabChange="handleTabChange"
			@searchAdmin="searchAdmin"
			:total-page="totalPage"
			:current-page="currentPage">
			</user-management>
        <role-management 
        	v-if="(tabCurrentIndex == 2 && !stepFlag && !stepFirst) || (tabCurrentIndex == 1 && stepFlag && !stepFirst) " 
        	
        	:menu-list="menuList" 
        	@addUserInfo="addUserInfo" 
        	@refresh="refresh"></role-management>
        <update-password v-if="(tabCurrentIndex == 3 && !stepFlag) || (tabCurrentIndex == 2 && stepFlag) || stepFirst"  ></update-password>
		<new-role v-if="tabCurrentIndex == 4" :role-id="roleId" @refresh="refresh"></new-role>
		
    </div>
</template>
<script>
    import tabs from '@/components/tabs/tabs.vue'
    import {
        mapMutations,
        mapGetters
    } from 'vuex'
    import userManagement from './components/userManagement.vue'
    import roleManagement from './components/roleManagement.vue'
	import updatePassword from './components/updatePassword.vue'
	import newRole from './components/new-role.vue'

    import {
        SUCCESS_REQUEST_STATUS
    } from '@/utils/config.js'
    export default {
        data() {
            return {
                adminList: [], 		// 用户列表数据
                ruleList: [], 		// 角色数据
                menuList: [], 		// 菜单列表
                currentPage: 0, 	// 页码
                totalPage:0,
                ruleMap: {}, 		// 对于角色
				targetList: {},
				roleId: '' ,			// 角色id
				stepFlag:false,
				stepFirst:false
            }
        },

        mounted() {

            this._initAdmin()
            this._initRole()
            
        },
        methods: {
        	_initAdmin() {
        		let adminList = sessionStorage.getItem('adminList') ? JSON.parse(sessionStorage.getItem('adminList')) :[]

				
				adminList.forEach(element => {

					if(element.menuUrl == 'permission') {
						let targetRoute = element.menu
						let list = this.tabList
						for(let i =0;i<targetRoute.length;i++){
							if(targetRoute[i] == '/admin/list') {
	        					this._initAdminList()
	        					return
	        				}else if(targetRoute[i] == '/rule/list') {

	        					this.stepFlag = true
	        					list.forEach((child, childIndex) => {
	        						if(child.title == '用户管理') {
										list.splice(childIndex,1)
										list.push({name:'1',title:'角色管理'})
									}
	        					})
	        					
								this.setTabList(list)
	        					this._initMenu()
	        					
	        					return;
	        				}else if(targetRoute[i] == '/admin/changepw') {

								this.stepFirst = true
	        					list.forEach((child, childIndex) => {
	        						if(child.title == '用户管理') {
	
										list.splice(childIndex,1)
										list.push({name:'1',title:'修改密码'})
									}
	        					})
	        					localStorage.setItem('roleStep',2)
								this.setTabList(list)

	        				}
						}

					}
				})
        		if(adminList.length>0 &&　adminList['permission']) {
        			let targetRoute = adminList['permission'].menu
        			

        			
        		}
        		
        	},
        	handleTabChange(page) {
        		this.currentPage = page
        		this._initAdminList()
        	},
			searchAdmin(num, value) {
				this.currentPage = 0
				let val = num == 2 ? '' : value
				this._initAdminList(val)
			},
			refresh() {
				this._initRole()
			},
			addUserInfo(id = '') {
				console.log(this.tabList)
				let title = ''
				let list = this.tabList
				if(id) {
					this.roleId = id
					title = '修改角色'
					
				}else{
					this.roleId = ''
					title = '新增角色'
				}
				list.forEach((item, index) => {
					if(item.title == '新增角色' || item.title == '修改角色') {
						list.splice(index,1)
						
					}
				})
				this.targetList = {name: '4', title: title}
				this.setTabList(list)
				console.log(this.tabList)
				
			},
			editUser() {
				this._initAdminList()
			},
            // 获取用户列表
            _initAdminList(value = '') {
                this.$ajax({
                    api: 'admin/list',
                    params: {
						pageSize: 20,
						keyword: value,
                        page: this.currentPage
                    }
                }).then(res => {
                    console.log(res)
                    if (res.status === SUCCESS_REQUEST_STATUS) {
                        this.adminList = res.data.adminList
                        this.currentPage = res.data.page.page
                        this.totalPage = res.data.page.total
                    }
                })
            },
            // 获取用户角色
            _initRole() {
                this.$ajax({
                    api: 'rule/list/new'
                }).then(res => {
                    console.log(res)
                    if (res.status === SUCCESS_REQUEST_STATUS) {
                        this.ruleList = res.data
                        let rule = {}
                        for (var i = 0; i < this.ruleList.length; i++) {
                            rule[this.ruleList[i].id] = this.ruleList[i].name;
                        }
                        this.ruleMap = rule
                    }
                })

            },
            _initMenu() {
                this.$ajax({
                    api: 'menu/list'
                }).then(res => {
                    console.log(res)
                    console.log(22)
                    if (res.status === SUCCESS_REQUEST_STATUS) {
                        this.menuList = res.data.menuList
                    }
                })
            },
            ...mapMutations({
                setTabList: 'SET_TAB_LIST',
                setTabCurrentIndex: 'SET_TAB_CURRENT_INDEX'
            }),
        },
        computed: {
            ...mapGetters([
				'tabList',
                'tabCurrentIndex'
            ])
        },
		
        components: {
            tabs,
			newRole,
            userManagement,
            roleManagement,
			updatePassword
        }

    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .qx-container {
        display: flex;
        flex: 1;
        box-sizing: border-box;
        flex-direction: column;
    }
</style>
